import React, { useState } from 'react';
import useAxios from '../hooks/useAxios';

function Login() {
    const [userName, setUsername] = useState('');
    const [userPassword, setPassword] = useState('');
    const [loginData, loginLoading, loginError, loginFetchData] = useAxios('post', '/login', { userName, userPassword });
    const [registerData, registerLoading, registerError, registerFetchData] = useAxios('post', '/register', { userName, userPassword });
    const [infoData, infoLoading, infoError, infoFetchData] = useAxios('get', '/test', {});

    const setUsernameValue = (value: string) => {
        setUsername(value);
        console.log('username', value);
    }

    const setPasswordValue = (value: string) => {
        setPassword(value);
        console.log('password', value);
    }

    const login = () => {
        loginFetchData();
        setTimeout(() => {
            console.log("登录返回结果是：",loginData);
        }, 500);
        
    }
    const register = () => {
        registerFetchData();
        setTimeout(() => {
            console.log("注册返回结果是：",registerData);
        }, 500);
        
    }
    const getInfo = () => {
        infoFetchData();
        setTimeout(() => {
            console.log("获取信息返回结果是：",infoData);
        }, 500);
        
    }

    return (
        <>
            <h1>Login</h1>
            <span>用户名：</span><input type="text" value={userName} onChange={(e) => setUsernameValue(e.target.value)} />
            <br />
            <span>密码：</span><input type="password" value={userPassword} onChange={(e) => setPasswordValue(e.target.value)} />
            <button onClick={login}>登录</button> <button onClick={register}>注册</button> <button onClick={getInfo}>获取信息</button>
        </>
    );
}

export default Login;